<template>
  <div class="register-box">
    <el-card class="box-card">
      <div style="display: flex">
        <el-link type="primary" href="/">已有账号? 登录</el-link>
      </div>
      <el-container class="header-container">
        <el-header>
          <h2>注册</h2>
        </el-header>
      </el-container>
      <el-form :model="form" ref="formRef" class="register-form" label-position="top">
        <el-form-item label="手机号" prop="username">
          <el-input v-model="form.username" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="nickName">
          <el-input v-model="form.nickName" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="微信号" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入微信号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" type="password" placeholder="请输入密码 密码必须包含大小写字母与符号"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="form.confirmPassword" type="password" placeholder="请再次输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="form.agreed">我已阅读并同意隐私声明</el-checkbox>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="submit" :disabled="!isFormValid" style="width: 100%; height: 38px">注册</el-button>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { ElMessage } from 'element-plus';
import router from "@/router";

import {register} from "@/api/login";

const form = ref({
  username: '',
  nickName: '',
  remark: '',
  password: '',
  confirmPassword: '',
  agreed: false
});
const formRef = ref(null);

const isFormValid = computed(() => {
  return (
      form.value.username.length > 0 &&
      form.value.nickName.length > 0 &&
      form.value.remark.length > 0 &&
      form.value.password === form.value.confirmPassword &&
      form.value.agreed
  );
});

const submit = () => {
  // 模拟注册逻辑
  if (isFormValid.value) {
    register(form.value).then(res =>{
      if (res.code === 200){
        ElMessage.success('注册成功');
        router.push("/")
      }else {
        ElMessage.error(res.msg);
      }
    })
  } else {
    ElMessage.warning('请完善表单信息');
  }
};
</script>

<style lang="less">
.register-box {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 8px;

  .box-card {
    width: 100%;
  }

  .el-form-item__label {
    width: 100% !important;
    font-weight: bold !important;
    font-size: 17px;
    color: #000;
  }

  .header-container {
    margin-bottom: 10px;
  }

  .el-header {
    padding: 0;
  }
}
</style>
